<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" color="#fff">
      <template #title><text style="color: #fff">我的库存</text></template>
    </GlobalTopBar>
    <!-- 内容 -->
    <view class="page_content">
      <!-- tabs -->
      <view class="tabs">
        <view
          :class="{ ac: indexs === index }"
          v-for="(item, index) in tabList"
          :key="index + 1"
          @click="indexs = index"
        >
          {{ item.text }}
        </view>
      </view>
      <!-- 列表内容 -->
      <scroll-view
        class="scroll-Y"
        scroll-y
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="handleRefresh"
        @scrolltolower="handleLoadMore"
        refresher-background="#f5f5f5"
        refresher-threshold="80"
      >
        <template v-if="indexs === 0">
          <view
            class="center_li"
            v-for="(item, index) in listData"
            :key="index + 1"
          >
            <view class="border_b li_tops">
              物料编码：{{ item.material_variant_number }}
            </view>
            <view class="title">{{ item.material_title }}</view>
            <view class="flex jb"
              ><text>规格型号：{{ item.material_variant_title }}</text
              ><text>×{{ item.count }}</text></view
            >
            <view class="flex jb"
              ><text>品牌：{{ item.material_brand }}</text
              ><text
                >售价：<text class="textac"
                  >￥{{ item.material_variant_sales_price }}</text
                >
              </text></view
            >
          </view>
        </template>
        <template v-else>
          <view
            class="flex marginl"
            @click="store.to(`/pages/master/inventory/addqh?type=${indexs}`)"
          >
            <uni-icons type="plus" size="24" color="#fff"></uni-icons>
            {{ `添加${dtext}` }}
          </view>
          <view
            class="center_li center_li2"
            v-for="(item, index) in listData"
            :key="index + 1"
          >
            <view class="topb">
              <view style="margin-bottom: 20rpx"
                ><text class="t1"></text
                >{{ `${dtext}编号：${item.order_number}` }}</view
              >
              <view
                ><text class="t1"></text
                >{{
                  `${indexs === 1 ? '取货' : '退库'}时间：${item.create_at}`
                }}</view
              >
            </view>
            <view class="contentbox">
              <view
                class="li_content"
                :class="{
                  border_b: y != item.warehouse_order_details_list?.length - 1,
                }"
                v-for="(i, y) in item.warehouse_order_details_list"
                :key="y + 1"
              >
                <view class="flex jb">
                  <text>物料名称</text>
                  <text>{{ i.material_title }}</text>
                </view>

                <view class="flex jb">
                  <text>物料编码</text>
                  <text>{{ i.material_variant_number }}</text>
                </view>
                <view class="flex jb">
                  <text>品牌</text>
                  <text>{{ i.material_brand }}</text>
                </view>
                <view class="flex jb">
                  <text>规格型号</text>
                  <text>{{ `${i.material_variant_title}×${i.count}` }}</text>
                </view>
              </view>
            </view>
          </view>
        </template>

        <view class="worder_box flex_center" v-if="!listData.length">
          <image :src="`${store.imgDomain}kucun_1.png`" mode="widthFix" />
          <text>暂无库存</text>
        </view>
      </scroll-view>
    </view>
    <!-- 底部菜单 -->
    <tabBar
      :current-index="2"
      :tab-list="store.tabList2"
      :style-config="{ activeColor: '#6ECDC1', inactiveColor: '#666666' }"
    ></tabBar>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useCounterStore } from '@/store';
import tabBar from '@/components/tabBar.vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { formatTimestamp } from '@/utils/validate';

const title = ref('我的');
const store = useCounterStore();
const couponQuantity = ref(0);
const workerData = ref({});
const indexs = ref(0);
// 列表数据相关
const listData = ref([{}]);
const pageNum = ref(1);
const pageSize = ref(10);
const isNext = ref(true);
const items = ref({});
const dtext = ref('取货单');
// 状态控制
const isRefreshing = ref(false); // 下拉刷新状态
const isLoading = ref(false); // 加载更多状态
const orderList = [
  {
    url: `${store.imgDomain}master_home_4.png`,
    num: 2,
    type: 1,
    text: '待接单',
  },
  {
    url: `${store.imgDomain}master_home_5.png`,
    num: 2,
    type: 1,
    text: '服务中',
  },
  {
    url: `${store.imgDomain}master_home_6.png`,
    num: 2,
    type: 1,
    text: '已完成',
  },
  {
    url: `${store.imgDomain}master_home_7.png`,
    num: 2,
    type: 1,
    text: '超时/拒单',
  },
];
const tabList = [
  { text: '我的库存' },
  { text: '我的取货单' },
  { text: '我的退库单' },
];

// 下拉刷新处理
const handleRefresh = () => {
  // 重置状态
  pageNum.value = 1;
  isRefreshing.value = true;
  // 重新加载数据
  getServiceOrderListByWorkStatus(true);
};

// 触底加载更多处理
const handleLoadMore = () => {
  if (!isNext.value || isLoading.value) return;
  // 加载下一页
  pageNum.value++;
  isLoading.value = true;
  getServiceOrderListByWorkStatus();
};

// 获取我的库存列表数据(分页)
const getServiceOrderListByWorkStatus = async (isRefresh = false) => {
  if (isRefresh) {
    pageNum.value = 1;
  }
  let url = !indexs.value
    ? 'worker/warehouse/getWorkerRelationMaterialInventoryList'
    : 'worker/warehouse/getWarehouseOrderList';
  try {
    const data = await request(url, {
      main_type: indexs.value === 1 ? 1 : 2,
      currpage: pageNum.value,
      pagesize: pageSize.value,
    });
    isNext.value = data.page.isNext;
    if (isRefresh) {
      listData.value = [...data.list];
    } else {
      listData.value = [...listData.value, ...data.list];
    }
  } finally {
    isRefreshing.value = false;
    isLoading.value = false;
  }
};

watch(
  () => indexs.value,
  (val) => {
    dtext.value = val === 1 ? '取货单' : '退库单';
    listData.value = [];
    getServiceOrderListByWorkStatus(true);
  },
);

onShow(() => {
  getServiceOrderListByWorkStatus(true);
});
</script>

<style scoped lang="scss">
.topbars {
  background: linear-gradient(to right, #2bc1ac, #10b3a2);
}
.page-container {
  color: #fff;
  background-color: #f8f8f8;
}
.topblue {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  image {
    width: 750rpx;
    height: 319rpx;
  }
}
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.page_content {
  position: relative;
  z-index: 1;
  padding: 20rpx;
  color: #333;
  .centers {
    box-sizing: border-box;
    padding: 40rpx;
    background-color: #fff;
    border-radius: 20rpx;
    border: 1rpx solid #71cdc4;
  }
  .wbox {
    display: flex;
    align-items: center;

    .headbox {
      width: 71rpx;
      height: 71rpx;
      margin-right: 20rpx;
      .headimg {
        width: 71rpx;
        height: 71rpx;
        border-radius: 50%;
        border: 1rpx solid #1383ff;
      }
    }
    .infobox {
      flex: 1;
      display: flex;
      justify-content: space-between;
      .infobox_item {
        display: flex;
        flex-direction: column;
        .vts {
          margin: 10rpx 0 0;
          image {
            width: 28rpx;
            height: 27rpx;
            margin: 0 10rpx;
          }
        }
        .t2 {
          display: flex;
          align-items: center;
        }
        .rtoptext {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 10rpx;
          .line {
            display: block;
            width: 1rpx;
            height: 33rpx;
            background-color: rgba(255, 255, 255, 0.3);
            margin: 0 20rpx;
          }
        }
      }
      .infobox_right {
        box-sizing: border-box;
        padding-bottom: 8rpx;
        justify-content: space-between;
      }
    }
  }
  .ewm {
    margin: 60rpx auto;
    width: 507rpx;
    height: 507rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .texts {
    text-align: center;
    margin-bottom: 40rpx;
  }
}
.hybox {
  border-radius: 15rpx;
  background-color: #fff;

  box-sizing: border-box;
  padding: 20rpx 35rpx;
  display: flex;
  align-items: center;
  display: flex;
  margin: 10rpx 0;
  .audio_img {
    margin-right: 10rpx;
    width: 34rpx;
    height: 31rpx;
  }
}
.hybtn {
  display: flex;
  align-items: center;
  font-size: 20rpx;
  color: #315dd8;
  padding-left: 20rpx;
  background-color: #cfe9ff;
  border-radius: 17rpx;
  line-height: 34rpx;
}
.hyicon {
  width: 33rpx;
  height: 30rpx;
  margin-right: 15rpx;
}
.hyname {
  font-size: 30rpx;
  color: #ffc66e;
}
.line {
  height: 26rpx;
  width: 1rpx;
  background-color: #fff;
  margin: 0 20rpx;
}
.times {
  color: #fff;
}
.ckqb {
  color: $uni-text-color-grey;
}
.srbox {
  padding: 30rpx 0;
  background-color: #fff;
  border: 1rpx solid #71cdc4;
  border-radius: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  .srbox_item {
    width: 33%;
    flex-direction: column;
    .t1 {
      font-size: 36rpx;
      font-weight: 700;
      margin-bottom: 20rpx;
    }
    .t2 {
      color: $uni-text-color-grey;
    }
  }
}
.btext {
  position: relative;
  margin-top: 35rpx;
  display: flex;
  justify-content: center;
  &::after {
    content: ' ';
    width: 100rpx;
    height: 1rpx;
    position: absolute;
    top: 50%;
    left: 140rpx;
    transform: translateY(-50%);
    background-color: #93dad3;
  }
  &::before {
    content: ' ';
    width: 100rpx;
    height: 1rpx;
    position: absolute;
    top: 50%;
    right: 140rpx;
    transform: translateY(-50%);
    background-color: #93dad3;
  }
  image {
    position: relative;
    display: block;
    opacity: 0.6;
    width: 185rpx;
    height: 38rpx;
  }
}
.worder_box {
  flex-direction: column;
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  image {
    width: 300rpx;
    margin-bottom: -40rpx;
  }
  text {
    color: $uni-text-color-grey;
  }
}
.scroll-Y {
  margin-top: 20rpx;
  height: 75vh;
}

.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;

  margin-bottom: 15rpx;
  view {
    position: relative;
    width: max-content;
    &.ac {
      color: #16baaa;
      &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 3rpx;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        background-color: #16baaa;
      }
    }
  }
}

.center_li {
  background-color: #fff;
  padding: 20rpx;
  border: 1rpx solid #7fd2cb;
  box-sizing: border-box;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  .li_tops {
    box-sizing: border-box;
    padding: 0 0 20rpx 0;
    margin-bottom: 20rpx;
  }
  .title {
    font-size: 30rpx;
    font-weight: 600;
  }
  .jb {
    justify-content: space-between;
    margin-top: 10rpx;
  }
  .textac {
    color: #fb0201;
    font-size: 30rpx;
  }
}
.center_li2 {
  padding: 0rpx;
  .contentbox {
    box-sizing: border-box;
    padding: 0 20rpx 20rpx;
  }
  .li_content {
    box-sizing: border-box;
    padding: 0 0 20rpx;
  }
  .topb {
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #e9fffc;
  }
}
.marginl {
  width: max-content;
  margin: 0 0 20rpx auto;
  background-color: #12c3b1;
  border-radius: 10rpx;
  box-sizing: border-box;
  padding: 10rpx 20rpx;
  color: #fff;
}
</style>
